<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<script src="jquery/jquery-3.4.1.min.js"></script>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
		<script src="bootstrap/js/bootstrap.js"></script>
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
		<link rel="stylesheet" href="bootstrap-treeview/bootstrap-treeview.min.css">
		<script src="bootstrap-treeview/bootstrap-treeview.min.js"></script>
	      
<!--	  <style>-->
<!--		  div{-->
<!--			  border: solid red 1px;-->
<!--		  }-->
<!--	  </style>-->
	  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	  <title>register</title>
	  <!-- Bootstrap -->
	  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	  </head>
	<body>
		<div class="container" >
			<!-- Stack the columns on mobile by making one full-width and the other half-width -->

			  <div class="col-xs-12 col-md-12" style="background-color: skyblue; height: 130px; width: 1087px; margin-left: 34px" >
				
				  <h2>欢迎来到恒源世家</h2>
				  <div style="float: right; margin-right: 10px;">
					  <span class="glyphicon glyphicon-time"></span>
					  <span id="tm">时间</span>
					  <i class="fa fa-user" aria-hidden="true"></i>
					  <span>欢迎您，</span>
					  <label id="u_name"></label>&nbsp;&nbsp;
					  <label id="r_name"></label>&nbsp;&nbsp;
					                  <button class="btn btn-default" id="logout">
										  <a href="gotoreturnlogin"><span class="glyphicon glyphicon-off glyphicon-menu-" ></span>注销</a>
					                  </button>
				  </div>

			</div>
			  <div class="col-md-12" style="margin-top: 30px">
			    <!--         左边的导航-->
			            <div class="col-md-3">
			                <div id="mytreeview"></div>
			            </div>
			    <!--        右边是面包屑导航+iframe-->
			            <div class="col-md-9">
			    <!--            面包屑导航-->
			                <div class="row">
			                    <ul class="breadcrumb" id="breadcrumb">
			                        <li class="active">首页</li>
			                        <li><a href="node/1_1">房间信息</a></li>
									<li><a href="node/2_1">客户信息</a></li>
			                        <li><a href="node/3_1">人员管理</a></li>
									<li><a href="node/4_1">物资管理</a></li>
			                    </ul>
			                </div>
			                <!--iframe-->
			                <div class="row embed-responsive embed-responsive-16by9" >
			                    <iframe class="embed-responsive-item" src="gotoCarousel" id="myiframe" name="myiframe">
								</iframe>
			                </div>
			            </div>
			        </div>

		</div>

		
		<script>
			//动态时间的显示
			function myclock(){
				var time=new Date();
				var year=time.getFullYear();
				var month= time.getMonth()+1;
				var day= time.getDate();
				var week= time.getDay();
				switch(week){
					case 1:week="一";break;
					case 2:week="二";break;
					case 3:week="三";break;
					case 4:week="四";break;
					case 5:week="五";break;
					case 6:week="六";break;
					case 7:week="日";break;
				}
				var hour= time.getHours()<10?"0"+time.getHours():time.getHours();
				var min= time.getMinutes()<10?"0"+time.getMinutes():time.getMinutes();
				var ss= time.getSeconds()<10?"0"+time.getSeconds():time.getSeconds();

				//var str=document.write(year+"年"+mouth+"月"+tian+"日星期"+week+hour+":"+min+":"+ss)
				//不能使用document.write,要把str赋给innerHTML,不能在使用输出语句,否则不显示
				var str=year+"年"+month+"月"+day+"日&nbsp;&nbsp;星期"+week+"&nbsp;&nbsp;"+hour+":"+min+":"+ss;
				var objH1=document.getElementById("tm");
				objH1.innerHTML=str;
				setTimeout("myclock()",1000);
			}
			window.onload=myclock;
			//在右上方映射出登录信息
					$(document).ready(function () {
						getUserInfo();
						function getUserInfo() {
							$.ajax({
								url:"user/getUserInfo",
								dataType:"json",
								type:"post",
							success:function (result) {
								var u_name= result.object.u_name;
								var r_name=result.object.r_name;
								$("#u_name").text(u_name);
								$("#r_name").text(r_name);
							}
							})
						}
					})

			//    加载左侧导航
			        $.getJSON("json/menu_json.json",function (data) {
			            $("#mytreeview").treeview({
			                data:data,
			                collapseIcon:"",
			                expandIcon:"",
			                onNodeSelected:function (event,data) {
								//面包屑导航要更新
								console.log(data);
								var parent = $("#mytreeview").treeview("getNode", data.parentId);
								console.log(parent);
								$("#breadcrumb").html('<li><a href="gotoindex">首页</a></li>\n' +
										'                    <li><a href="">' + parent.text + '</a></li>\n' +
										'                    <li class="active">' + data.text + '</li>');
								//    iframe要加载相应页面
								$("#myiframe").attr("src", data.href);
							}
			            });
						// $("#logout").click(function () {
						// 	$(location).attr("href","../gotoreturnlogin")
						// })
			        });
		</script>
	</body>
</html>
